<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <view class="main">
            <view class="state">
                <uni-icons size="128" class="result-icon" type="checkbox-filled"></uni-icons>
                <view class="result-rext">订单提交成功</view>
                <view class="info">
                    <view class="flex-s-c info-li">
                        <text class="label">应付金额</text>
                        <text class="text">￥{{ data.PayMoney }}</text>
                    </view>
                    <view class="flex-s-c info-li">
                        <text class="label">订单金额</text>
                        <text class="text">￥{{ data.PriceSum }}</text>
                    </view>
                    <view class="flex-s-c info-li">
                        <text class="label">订单编号</text>
                        <text class="text">{{ data.Sn }}</text>
                    </view>
                    <view class="flex-s-c info-li">
                        <text class="label">客户名称</text>
                        <text class="text">{{ data.ValetName }}</text>
                    </view>
                    <!-- <easy-label-value label="应付金额:" :value="`￥${data.PayMoney}`"></easy-label-value>
					<easy-label-value label="订单金额:" :value="`￥${data.PriceSum}`"></easy-label-value>
					<easy-label-value label="订单编号:" :value="data.Sn"></easy-label-value>
					<easy-label-value label="客户名称:" :value="data.ValetName"></easy-label-value> -->
                </view>
            </view>
            <view class="action" v-if="data.State != 7">
                <invite-pay :data="data"></invite-pay>
                <button class="btn btn-main-hollow" @click="goOrderDetail(data.OrderId)">
                    订单详情
                </button>
                <button class="btn btn-main-hollow" v-if="data.IsCashDelivery" @click="$refs.tip.open()">
                    货到付款
                </button>
            </view>
            <view class="wait-tip" v-else>
                <text>当前订单审核中，待通过后进行付款</text>
            </view>
        </view>

        <uni-popup ref="tip" type="dialog">
            <uni-popup-dialog type="text" title="提示" content="客户将在交货时付款,是否选择货到付款？" :before-close="true" @close="close"
                @confirm="confirm"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import easyLabelValue from "@/components/easy/easy-label-value.vue"
import invitePay from "@/components/order/invite-pay.vue"

import { ValetCashDelivery } from "@/service/api/order.js"
import config from "@/config/config.js"
export default {
    components: {
        easyLabelValue,
        invitePay,
    },
    data() {
        return {
            config: {
                title: "提交成功",
                centerSlot: true,
                rightSlot: false,
                rightBtns: [
                    {
                        id: 1,
                        type: "redo",
                    },
                ],
            },
            data: null,
        }
    },
    onLoad(e) {
        this.data = JSON.parse(decodeURIComponent(e.data))
        console.log(this.data)
    },
    mounted() { },
    methods: {
        goOrderDetail(id) {
            this.easyGoTo("/pages/order/detail?orderId=" + id)
        },
        showTip() {
            this.easyToast()
        },
        close() {
            this.$refs.tip.close()
        },
        confirm() {
            //确认操作
            let orderId = this.data.ID
            let param = {
                orderId: orderId,
            }
            let path = "?orderId=" + orderId
            ValetCashDelivery(param, path).then((res) => {
                if (res.State == 1) {
                    this.easyGoHome()
                } else {
                    this.easyToast(res.Msg)
                }
            })
            this.close()
        },
    },
}
</script>

<style lang="scss" scoped>
.main {
    // padding: $app-page-padding;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    padding-bottom: 32rpx;

    .state {
        text-align: center;
        position: relative;
        background: $color-white;
        margin: 100rpx 24rpx 24rpx;
        padding: 76rpx 32rpx 24rpx;
        border-radius: 16rpx;

        .result-icon {
            position: absolute;
            top: -64rpx;
            left: calc(50% - 64rpx);
        }

        .result-rext {
            margin-top: 10rpx;
            font-size: $font-size-32;
        }

        .info {
            padding-top: 56rpx;

            .info-li {
                height: 68rpx;

                .label {
                    font-size: $font-size-28;
                    color: $color-gray-3;
                }

                .text {
                    font-size: $font-size-28;
                }
            }
        }
    }

    .action {
        .btn {
            height: 88rpx;
            border-radius: 44rpx;
            font-size: 32rpx;
            margin: 24rpx 56rpx 0;
        }
    }

    .wait-tip {
        padding: $app-page-padding;
        display: flex;
        justify-content: center;

        text {
            color: $color-red;
            font-size: $font-size-36;
        }
    }
}
</style>
